<template>
  <div class="payIndex">
    <van-cell-group>
      <!-- 课程信息 -->
      <van-cell class="course-info">
        <img :src="courseInfo.courseImgUrl"/>
        <div class="course-right">
          <div class="courseName">{{courseInfo.courseName}}</div>
          <div class="price">￥{{courseInfo.discounts}}</div>
        </div>
      </van-cell>
      <!-- 账户信息 -->
      <van-cell class="accout-info">
        <div class="pay-info">
          <div>购买信息</div>
          <div class="lg">购买课程后使用此账户登录 【拉勾教育】 学习课程</div>
        </div>
        <div class="user">当前账号: {{account}}</div>
      </van-cell>
      <!-- 支付方式 -->
      <van-cell class="pay-info">
        <van-radio-group v-model="radio">
          <p>支付方式</p>
          <van-cell-group class="payStyle">
            <van-cell @click="radio = '1'">
              <template #title>
                <img src="http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png" alt="">
                <span>微信支付</span>
              </template>
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell @click="radio = '2'">
              <template #title>
                <img src="http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png" alt="">
                <span>支付宝支付</span>
              </template>
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <van-button type="primary" @click="payClick">￥{{courseInfo.discounts}} 立即支付</van-button>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { CellGroup, Cell, RadioGroup, Button, Toast } from 'vant'
import { getCourseById } from '@/services/course'
import { saveOrder, getPayInfo, payOrder, getPayResult } from '@/services/pay'
export default {
  name: 'payIndex',
  components: {
    VanCellGroup: CellGroup,
    VanCell: Cell,
    VanRadioGroup: RadioGroup,
    VanButton: Button
  },
  props: {
    id: {
      type: [String, Number],
      require: true
    }
  },
  data () {
    return {
      courseInfo: {},
      radio: '1',
      // 记录商品订单号
      orderNo: null,
      // 支付方式
      payInfo: []
    }
  },
  created () {
    this.getCourseById()
    this.loadOrder()
  },
  methods: {
    // 获取课程的信息
    async getCourseById () {
      const { data } = await getCourseById({
        courseId: this.id
      })
      if (data.state === 1) {
        this.courseInfo = data.content
      }
    },
    // 创建订单,获取订单号
    async loadOrder () {
      const { data } = await saveOrder({
        goodsId: this.id
      })
      this.orderNo = data.content.orderNo
      // 支付方式
      const { data: payInfo } = await getPayInfo({
        shopOrderNo: this.orderNo
      })
      this.payInfo = payInfo.content.supportChannels
    },
    // 点击支付,跳转到支付（微信/支付宝）页面
    async payClick () {
      const { data } = await payOrder({
        goodsOrderNo: this.orderNo,
        channel: this.radio === '1' ? 'weChat' : 'aliPay',
        returnUrl: 'http://edufront.lagou.com'
      })
      console.log(data)
      if (data.state === 1) {
        window.location.href = data.content.payUrl
        // 点击支付后,每隔一段时间查询支付结果
        const timer = setInterval(async () => {
          const { data: PayResult } = await getPayResult({
            orderNo: data.content.orderNo
          })
          console.log(PayResult)
          if (PayResult.content && PayResult.content.status === 2) {
            clearInterval(timer)
            this.$router.push({ name: 'learn' })
            Toast.success('支付成功')
          }
        }, 1000)
      }
    }
  },
  computed: {
    account () {
      return this.$store.state.user.organization.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
  }
}
</script>

<style lang="scss" scoped>
.payIndex{
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.van-cell-group{
  height: 100%;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}
.course-info{
  width: 100%;
  padding: 40px 20px 0;
  margin-bottom: 10px;
  .van-cell__value{
    width: 100%;
    height: 130px;
    display: flex;
    justify-content: flex-start;
    img{
      width: 80px;
      height: 107px;
    }
    .course-right{
      flex: 1;
      height: 107px;
      padding: 5px 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .courseName{
        font-size: 16px;
      }
      .price{
        font-size: 22px;
        color: #ff7452;
      }
    }
  }
}
.accout-info{
  height: 100px;
  box-sizing: content-box;
  width: 100%;
  margin-bottom: 10px;
  .van-cell__value{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .lg{
    font-size: 12px;
    color: #999;
    }
    .user{
      font-size: 16px;
    }
  }
}
.pay-info{
  flex: 1;
  .van-cell__value{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .van-button{
      width: 90%;
      margin: 0 5%;
      background-color: #fbc546;
      border-radius: 20px;
      border: #fbc546;
      font-size: 18px;
      color: #333;
    }
    .payStyle{
      height: 96px;
      img{
        width: 28px;
        height: 28px;
      }
    }
  }
}
.van-cell__title{
  display: flex;
  span{
    margin-left: 10px;
    font-size: 16px;
  }
}
::v-deep .van-radio__icon--checked .van-icon {
  background-color: #fbc546;
  border-color: #fbc546;
}
</style>
